<!DOCTYPE html>
<html>
<head>
    <html lang="ch">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>淘方案</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <style>
        div.sticky  /*分类栏位置固定*/
        {
            position: -webkit-sticky;
            position: sticky;
            top: 50px ;       
         }
        div.fixed_side    /*侧栏位置固定*/
        {
            position: -webkit-sticky;
            position: fixed;
            bottom: 100px;
            right: 15px;
        }
        
        /*底部连接的颜色设定*/
        a:visited           
        {
            color:white;
        }
        a:hover
         {
            text-decoration:none;
            color:rgb(14, 196, 241);
         }
 
         
    </style>
</head>

<body onload="indexData()">
    
     <!-- 导航栏 -->
    <nav class="navbar navbar-expand-sm bg-dark fixed-top " >

        <!-- 左侧导航栏 用来摆放Logo-->
        <ul class="navbar-nav  " style="padding-left: 50px">
            <li class="nav-item">
                <a class="btn nav-link" href="../Project_Tao/index.html"><span class="text-white" ><strong>淘方案</strong></span></a>   
            </li>
        </ul>

        <!-- 中间导航栏  用来放置发现,消息,搜索框-->
        <div class="collapse navbar-collapse " style="padding-left: 75px">
            <ul class="navbar-nav ">
                <li class="nav-item">
                    <a class=" btn nav-link " href="#"><span class="text-white" >发现</span></a>   
                </li>
                <li class="nav-item">
                    
                    <a class="btn nav-link text-white" href="#">消息 <span class="badge badge-danger">4</span></a>
                  
                </li>
            </ul>

            <!-- 搜索框 -->
            <div style="padding-left: 15px"> <input class="form-control" type="text" placeholder="Search"> </div>
            <button class="btn btn-success " type="button">Search</button>
        </div>
        
 
        <!-- 右侧导航栏 用户头像以及下拉框-->
        <div class="collapse navbar-collapse justify-content-end" >
            <ul class="navbar-nav " >
                <li class="nav-item ">
                    <div class="dropdown" style="width: 150px">
                        <a class="btn text-white dropdown-toggle" data-toggle="dropdown">
                            Koga
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item text-dark" href="../Project_Tao/index.html">我的主页</a>
                            <a class="dropdown-item text-dark" href="../Project_Tao/HTML/account.html">账户资料</a>
                            <a class="dropdown-item text-dark" href="../Project_Tao/HTML/collect.html">我的收藏</a>
                            <a class="dropdown-item text-dark" href="../Project_Tao/HTML/Sign_out.html">注销</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>              
    </nav>

    <!-- 图片轮播 -->
    <div class="container " style="margin-top:80px ">
        <div class="row">   
            <div class="col-1 "></div>    <!--调整间距-->
            <div class="col-10  ">
                <div id="slide" class="carousel slide" data-ride="carousel">

                    <!-- 底部提示横杠 -->
                    <ul class="carousel-indicators" id="bottomIndicator">
                        <!-- <li data-target="#slide" data-slide-to="0" class="active"></li>
                        <li data-target="#slide" data-slide-to="1"></li>
                        <li data-target="#slide" data-slide-to="2"></li>
                        <li data-target="#slide" data-slide-to="3"></li>
                        <li data-target="#slide" data-slide-to="4"></li> -->
                        <!-- 通过 indexPicture.js 中的 slidePicture(data) 来添加代码 -->
                    </ul>

                    <!-- 图片 -->
                    <div class="carousel-inner" id="slidePicture">
                        <!-- <div class="carousel-item text-center active" >
                            <img  id="slidePicture0" width="450" height="250">
                        </div>
                        <div class="carousel-item text-center" >
                            <img  id="slidePicture1" width="450" height="250">
                        </div>
                        <div class="carousel-item text-center " >
                            <img   id="slidePicture2" width="450" height="250">
                        </div>
                        <div class="carousel-item text-center " >
                            <img  id="slidePicture3" width="450" height="250">
                        </div>
                        <div class="carousel-item text-center" >
                            <img  id="slidePicture4" width="450" height="250">
                        </div> -->
                        <!-- 通过 indexPicture.js 中的 slidePicture(data) 来添加代码 -->
                    </div>

                    <!-- 左右按钮 -->
                    <a class="carousel-control-prev" href="#slide" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                        </a>
                        <a class="carousel-control-next" href="#slide" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>

                </div>
            </div>
            <div class="col-1  "></div>   <!--调整间距-->
        </div>
    </div>

    <!-- 主体部分 -->
    <div class="container" style="margin-top:20px">
        <div class="row">

            <!--顶点,用于返回顶部-->
            <div class="col-1 ">
                <a href="top"> </a>         
            </div>  

            <!-- 内容 -->
            <div class="col-7  " style="padding-left: 15px">

                <!-- 导航 -->
                <div class="row">                   
                    <div class="col-12"style="margin-top: 10px;" >
                        <ul class="nav nav-tabs nav-justified " role="tablist" >
                            <li class="nav-item">
                                <a class="nav-link active" href="#all" data-toggle="tab">全部产品</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#suggest" data-toggle="tab">推荐产品</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#collectMost" data-toggle="tab">收藏最多</a>
                            </li>
                    </div>
                </div>

                <!-- 选项卡内容切换-->
                <div class="tab-content">
                    <!-- 全部产品-->
                    <div class="container tab-pane active" id="all">
                        <div class="row" id="allProgramma">
                             <!-- 通过 indexPicture.js 中的 setProgramma (data,choosePrograma) 来添加代码 -->
                        </div>
                    </div>

                    <!-- 推荐产品-->
                    <div id="suggest" class="container tab-pane fade">
                        <div class="row" id="suggestProgramma">
                            <!-- 通过 indexPicture.js 中的 setProgramma (data,choosePrograma) 来添加代码 -->
                        </div>
                    </div>

                    <!-- 收藏最多 -->       
                    <div id="collectMost" class="container tab-pane fade">
                        <div class="row" id="collectProgramma">
                            <!-- 通过 indexPicture.js 中的 setProgramma (data,choosePrograma) 来添加代码 -->        
                         
                        </div>  
                    </div>
                </div>
            </div>

            
             <!-- 折叠分类 -->
            <div class="col-3 " >
                    <div class="btn-group-vertical btn-block sticky" id="category">
    
                        <!-- 红色按钮及其折叠标签 -->
                    <button type="button" class="btn btn-primary btn-lg border-light rounded bg-danger " data-toggle="collapse" data-target="#Automotive" aria-expanded="false" aria-controls="Automotive" style="margin:10px 0px 5px 0px "><strong>Automotive</strong></button>           
                    <div class="collapse " id="Automotive" data-parent="#category">
                        <div style="margin-bottom: 10px; ">
                            <a  class="btn btn-primary btn-sm border-light rounded bg-danger text-white" href="../Project_Tao/HTML/Automotive/ADAS.html" >ADAS</a>  
                            <a  class="btn btn-primary btn-sm border-light rounded bg-danger text-white" href="../Project_Tao/HTML/Automotive/BMS.html" >BMS</a>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-danger" >Infotainment</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-danger" >PEPES</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-danger" >77G Radar</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-danger" >车充</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-danger" >Rearview Mirror</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-danger" >NFC 车门把手</button>
                            <a  class="btn btn-primary btn-sm border-light rounded bg-danger text-white" href="../Project_Tao/HTML/Automotive/all.html" >全部</a>    
                        </div>
                    </div>
                    
                    <!-- 黄色按钮及其折叠标签 -->
                    <button type="button" class="btn btn-primary btn-lg border-light rounded bg-warning" data-toggle="collapse" data-target="#IoT" style="margin:0px 0px 5px 0px "><strong>IoT</strong></button>
                    <div class="collapse" id="IoT" data-parent="#category">
                        <div style="margin-bottom: 10px;">
                            <a  class="btn btn-primary btn-sm border-light rounded bg-warning text-white" href="../Project_Tao/HTML/IoT/smart_home.html" >智能家居</a>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-warning" >E-Lock</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-warning" >IP Camera</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-warning" >EV Charger</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-warning" >共享单车</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-warning" >城市网关</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-warning" >共享插座</button>
                            <a  class="btn btn-primary btn-sm border-light rounded bg-warning text-white" href="../Project_Tao/HTML/IoT/all.html" >全部</a>
                        </div>
                    </div>
                    
                    <!-- 绿色按钮及其折叠标签 -->
                    <button type="button" class="btn btn-primary btn-lg border-light rounded bg-success" data-toggle="collapse" data-target="#Industry" style="margin:0px 0px 5px 0px "><strong>Industry</strong></button>
                    <div class="collapse" id="Industry" data-parent="#category">
                        <div style="margin-bottom: 10px; ">
                            <a  class="btn btn-primary btn-sm border-light rounded bg-success text-white" href="../Project_Tao/HTML/Industry/Digital_Power.html" >Digital Power</a>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-success" >无人机</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-success" >Motor</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-success" >Adaptor</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-success" >Wireless Charger</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-success" >工业控制</button>
                            <a  class="btn btn-primary btn-sm border-light rounded bg-success text-white" href="../Project_Tao/HTML/Industry/all.html" >全部</a>
                        </div>
                    </div>


                    <!-- 蓝色按钮及其折叠标签 -->
                    <button type="button" class="btn btn-primary btn-lg border-light rounded bg-info" data-toggle="collapse" data-target="#consumer" style="margin:0px 0px 5px 0px "><strong>Consumer</strong></button>
                    <div class="collapse" id="consumer" data-parent="#category">
                        <div style="margin-bottom: 10px; ">
                               
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-info" >手机平板</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-info" >智能穿戴</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-info" >机器人</button>
                            <a  class="btn btn-primary btn-sm border-light rounded bg-info text-white" href="../Project_Tao/HTML/Consumer/TV_Box.html" >TV-Box</a>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-info" >家电设备</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-info" >电竞产品</button>
                            <button type="button" class="btn btn-primary btn-sm border-light rounded bg-info" >POS 机</button>
                            <a  class="btn btn-primary btn-sm border-light rounded bg-info text-white" href="../Project_Tao/HTML/Consumer/all.html" >全部</a>

                        </div>
                    </div>
                    </div>
            </div> 
            
            <!--侧边栏-->
            <div class="col-1 ">
                <div class="btn-group-vertical  fixed_side" style="padding-top:10px ">
                    <a class="btn btn-primary border-0"href="#top" data-toggle="tooltip" data-placement="right" title="返回顶部"style="background-color: rgb(128, 125, 125)"> &uArr;</a>   <!--返回顶部-->
                   

                </div>
            </div> 
        </div>
    </div>
   
    <!--底部-->
    <div class="bg-dark">
        <div class="container">
            <div class="row">
                <div class="col-1"></div> <!--调整间距---->

                     <!-- 第一列-关于世平 -->
                    <div class="col-2 " style="padding-left: 15px;margin-top:30px">
                    <ul class="list-group  " >
                        <li class="list-group-item border-0 rounded-0 bg-dark "><a href="https://www.wpgholdings.com/wpig/info/zhcn/group_profile" target="_blank"  style="color: rgb(14, 196, 241)" >关于世平</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark small"><a href="https://www.wpgholdings.com/wpig/info/zhcn/group_profile" target="_blank" >世平简介</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark small"><a href="https://www.wpgholdings.com/wpig/info/zhcn/business_strategy" target="_blank">经营策略</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark small"><a href="https://www.wpgholdings.com/wpig/info/zhcn/organization"target="_blank">组织架构</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark small"><a href="https://www.wpgholdings.com/wpig/milestone/zhcn" target="_blank">大事纪</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark small"><a href="https://www.wpgholdings.com/wpig/award/zhcn" target="_blank">得奖专区</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark small"><a href="https://www.wpgholdings.com/wpig/environmental/zhcn/environmental_profile" target="_blank">环保专栏</a></li>
                    </ul>
                    </div>

                    <!-- 第二列-代理产线 -->
                    <div class="col-2 " style="padding-left: 15px;margin-top:30px">
                    <ul class="list-group  " >
                        <li class="list-group-item border-0 rounded-0 bg-dark "><a href="https://www.wpgholdings.com/wpig/productline/zhcn" target="_blank"  style="color: rgb(14, 196, 241)" >代理产线</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark small "><a href="https://www.wpgholdings.com/wpig/productline/zhcn" target="_blank" >代理产线</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark small"><a href="https://www.wpgholdings.com/wpig/procurement/zhcn" target="_blank">零件采购</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark small"><a href="http://www.wpgcnc.com/"target="_blank">通路销售:世平伟业</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark small"><a href="http://www.genuineasia.com/" target="_blank">通路销售:WPG C&C</a></li>
                    </ul>
                    </div>

                     <!-- 第三列-新闻中心 -->
                    <div class="col-2 " style="padding-left: 15px;margin-top:30px">
                    <ul class="list-group  " >
                        <li class="list-group-item border-0 rounded-0 bg-dark " ><a href="https://www.wpgholdings.com/wpig/event/zhcn"target="_blank" style="color: rgb(14, 196, 241)">新闻中心</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark small "><a href="https://www.wpgholdings.com/wpig/program/zhcn" target="_blank" >方案在线</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark small	"><a href="https://www.wpgholdings.com/wpig/product/zhcn" target="_blank">原厂新闻</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark small"><a href="https://www.wpgholdings.com/wpig/event/zhcn"target="_blank">最新活动</a></li>
                    </ul>
                    </div>

                    <!-- 第四列-招聘专区 -->
                    <div class="col-2 " style="padding-left: 15px;margin-top:30px">
                    <ul class="list-group  " >
                        <li class="list-group-item border-0 rounded-0 bg-dark " style="color: rgb(14, 196, 241)" ><a href="https://www.wpgholdings.com/wpig/careers/zhcn/group_jobs" target="_blank" style="color: rgb(14, 196, 241)" >招聘专区</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark small "><a href="https://www.wpgholdings.com/wpig/careers/zhcn/group_jobs" target="_blank" >员工福利</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark small	"><a href="https://www.wpgholdings.com/wpig/careers/zhcn/group_joinus" target="_blank">加入世平</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark small"><a href="https://www.wpgholdings.com/wpig/careers/zhcn/group_roadmap"target="_blank">交通动线</a></li>
                    </ul>
                    </div>

                    <!-- 第五列-销售据点 -->
                    <div class="col-2 " style="padding-left: 15px;margin-top:30px">
                    <ul class="list-group  " >
                        <li class="list-group-item border-0 rounded-0 bg-dark " style="color: rgb(14, 196, 241)" ><a href="https://www.wpgholdings.com/wpig/branches/zhcn" target="_blank" style="color: rgb(14, 196, 241)">销售据点</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark " style="color: rgb(14, 196, 241)" ><a href="http://www.wpgdadago.com/Home" target="_blank" style="color: rgb(14, 196, 241)">大大购</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark " style="color: rgb(14, 196, 241)" ><a href="https://www.wpgholdings.com/contactus/index/zhcn" target="_blank" style="color: rgb(14, 196, 241)">联络我们</a></li>
                        <li class="list-group-item border-0 rounded-0 bg-dark " style="color: rgb(14, 196, 241)" ><a href="https://www.wpgholdings.com/main/index/zhcn" target="_blank" style="color: rgb(14, 196, 241)">大联大控股</a></li>
                    </ul>
                    </div>
            </div>
            <div class="row">
                <div class="col text-center text-white small">
                    大联大控股 Copyright © 2018 WPG Holdings All rights reserved.
                </div>
            </div>
        </div>>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="../Project_Tao/JS/index.js"></script>



 

    <!-- 用于显示提示框 -->
    <script>       
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip();   
        });
    </script>

</body>
</html>